<template>
  <div class="about">
    <h1>This is an about page</h1>
    <i class="el-icon-loading"></i>
    <el-button @click="query">查询</el-button>
    <el-button @click="abort">取消</el-button>
    <el-button @click="test">test</el-button>
    <el-input v-model="esmVal"></el-input>
    <el-popover
      placement="top-start"
      title="标题"
      width="200"
      trigger="hover"
      content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"
    >
      <!-- <el-button slot="reference">hover 激活</el-button> -->
      <div slot="reference">hover 激活</div>
    </el-popover>
    <iframe
      src="http://myhost.com:8081"
      style="width: 500px; height: 500px"
    ></iframe>
    {{ result }}
  </div>
</template>

<script>
import axios from "axios";
import esm from "@/api/esm";
import qs from "qs";
const CancelToken = axios.CancelToken;

export default {
  data() {
    return {
      result: [],
      esmVal: esm.getData(),
      cancel: null,
    };
  },
  mounted() {
    // console.log(this.$router.getRoutes())
    console.log("Vue", this);
  },
  methods: {
    query() {
      axios
        .create()({
          method: "post",
          url: "/api/users/info",
          // cancelToken: source.token
          cancelToken: new CancelToken((c) => {
            // executor 函数接收一个 cancel 函数作为参数
            this.cancel = c;
          }),
        })
        .then((res) => {
          this.result = res;
        });
    },
    abort() {
      // source.cancel('Operation canceled by the user.');
      this.cancel();
    },
    test() {
      esm.setData(this.esmVal);
      axios({
        method: "get",
        url: "/api/users/info",
        params: {
          users: ["aa", "bb", "cc"],
        },
        paramsSerializer: (params) => {
          return qs.stringify(params, { indices: false });
        },
        headers: {
          "Content-Type": "application/json,text-plain",
        },
      });
    },
  },
};
</script>